<template>
	
	<div id="edit-model-wrap-bottom" class="edit-model-wrap-bottom" v-show="isShow" :style="{ height: height + 'px' }">
		<button class="resize-button" @click="OnResizeClick">
			<el-icon>
				<ArrowRightBold v-show="isExpand" />
				<ArrowLeftBold v-show="!isExpand" />
			</el-icon>
		</button>
		<div class="split-directive-bar" @mousedown="dragEagle">
		</div>
		
		<div class="panel">
			<div class="pane-tabs">
				<div class="tab1">
					<button @click="OnTabChange(1)" :style="{background:TabBgBtn01}">资产库</button>
				</div>
				<div class="tab2">
					<button @click="OnTabChange(2)" :style="{background:TabBgBtn02}">本场景</button>
				</div>
			</div>
			
			<div class="asset-pane">
				<div class="panel-header">
					<ul>
						<li><div><Menu /></div></li>
						<li><div @click="loadForAsset"><Back /></div></li>
						<li><span >{{AssetFrom}}</span></li>
						<li><div class="arrow-i"><ArrowRight /></div></li>
						<li><span>绘制工具</span></li>
					</ul>
					<div class="tool-bar">
						<div class="input-asset-search">
							<input  type="text"/>
						</div>
						<div class="btn-asset-manage">
							<button>
								<div> <CopyDocument /></div>
								<span style="display: block;margin-left: 22px;">管理资产库</span>
							</button>
						</div>
						<div class="btn-asset-refresh">
							<button><el-icon><Refresh /></el-icon></button>
						</div>
					</div>
				</div>
				<div class="panel-body">
					
					<div class="classify-nav">
						  <el-tree
						    :data="data"
						    :props="defaultProps"
						    accordion
						    @node-click="handleNodeClick"
						  />
					</div>
					
					<div class="asset-list">
						<ul class="asset-classify">
							<li >
								<div style="text-align: center;padding-top: 15px;">
									<img style="width: 3.125rem;" src="../../../../assets/icons/add.svg"/>
								</div>
							</li>
							<li >
								<div>
									<img src="../../../../assets/icons/folder-add-fill.svg"/>
								</div>
							</li>
							
							<li v-for="asset in assetRefs" >
								<div>
									<img src="../../../../assets/icons/folder-add-fill.svg"/>
								</div>
							</li>
							
						</ul>
					</div>
				</div>
				
			</div>
			<div class="draw-tool-pane">
				<div class="panel-header">
					<span>绘制工具</span>
				</div>
			</div>
			<div class="draw-asset-pane">
				<div class="panel-header"><span>资产名称</span></div>
			</div>
		</div>
		
	</div>
	
</template>

<script setup lang="ts">
	import {
	  MoreFilled,ArrowRightBold,ArrowLeftBold,Menu,Back,ArrowRight,Refresh,CopyDocument,Right
	} from '@element-plus/icons-vue'
	import { ref } from 'vue'
	let paneHeight=288;
	const isExpand = ref(true)
	const isShow = ref(true)
	const height = ref(paneHeight)
	const TabBgBtn01=ref("#0080ff");
	const TabBgBtn02=ref("transparent");
	const AssetFrom=ref("资源库");
	
	const assetRefs=ref([]);
	
	const OnResizeClick=()=>{
		if(height.value==paneHeight){
			isExpand.value=false
			height.value=0;
		}else{
			height.value=paneHeight;
			isExpand.value=true
		}
	}
	
	let type=1;
	let classify;
	
	const OnTabChange=(e)=>{
		if(e==1){
			TabBgBtn01.value="#0080ff";
			TabBgBtn02.value="transparent";
			type=e;
			loadForAsset();
			AssetFrom.value="资源库"
		}else{
			TabBgBtn02.value="#0080ff";
			TabBgBtn01.value="transparent";
			type=e;
			AssetFrom.value="本场景"
			loadForAsset();
		}
	}
	
	
	const show=()=>{
		isShow.value=!isShow.value
	}
	
	
	
	const loadForAsset=()=>{
		
		if(1==type){
			assetRefs.value.push({
				id:'1',
			})
			console.log("type>>",assetRefs)
		}else{
			console.log("type>>",type)
			assetRefs.value=[]
		}
	}
	

	const dragEagle= (e)=> {
		var targetDiv = document.getElementById('edit-model-wrap-bottom'); 
		var targetDivHeight = targetDiv.offsetHeight;
		var startX = e.clientX;
		var startY = e.clientY;
		document.onmousemove  = function (e) {
			e.preventDefault();
			var distY = Math.abs(e.clientY - startY);
			//往上方拖动：
			if (e.clientY < startY) {
				targetDiv.style.height = targetDivHeight + distY + 'px';
			}
			//往下方拖动：
			if (e.clientX < startX && e.clientY > startY) {
				targetDiv.style.height = (targetDivHeight - distY) + 'px';
			}
			if (parseInt(targetDiv.style.height) >= 500) {
				targetDiv.style.height = 500 + 'px';
			}
			if (parseInt(targetDiv.style.height) <= 288) {
				targetDiv.style.height = 288 + 'px';
			}
		}
		// 鼠标松开事件
		document.onmouseup = function (evt) {
			document.onmousemove = null;
			document.onmouseup = null;
		};
	}
	
	onMounted(()=>{
	})
	
	defineExpose({
	  show
	});
	
	
	interface Tree {
	  label: string
	  children?: Tree[]
	}
	
	const handleNodeClick = (data: Tree) => {
	  console.log(data)
	}
	
	const data: Tree[] = [
	  {
	    label: 'Level one 1',
	    children: [
	      {
	        label: 'Level two 1-1',
	        children: [
	          {
	            label: 'Level three 1-1-1',
	          },
	        ],
	      },
	    ],
	  },
	  {
	    label: 'Level one 2',
	    children: [
	      {
	        label: 'Level two 2-1',
	        children: [
	          {
	            label: 'Level three 2-1-1',
	          },
	        ],
	      },
	      {
	        label: 'Level two 2-2',
	        children: [
	          {
	            label: 'Level three 2-2-1',
	          },
	        ],
	      },
	    ],
	  },
	  {
	    label: 'Level one 3',
	    children: [
	      {
	        label: 'Level two 3-1',
	        children: [
	          {
	            label: 'Level three 3-1-1',
	          },
	        ],
	      },
	      {
	        label: 'Level two 3-2',
	        children: [
	          {
	            label: 'Level three 3-2-1',
	          },
	        ],
	      },
	    ],
	  },
	]
	const defaultProps = {
	  children: 'children',
	  label: 'label',
	}
	
	
	
</script>

<style  scoped>
	.edit-model-wrap-bottom{
			height: 18rem;
			background: #272729;
			position: relative;
			border-top: 1px solid #424653;
			>.resize-button {
			    position: absolute;
			    cursor: pointer;
			    padding: 1px;
			    border: 1px solid #0080ff;
			    color: #d4d4d4;
			    border-radius: inherit;
			    font-size: 12px;
			    -webkit-box-sizing: border-box;
			    box-sizing: border-box;
			    background: -webkit-gradient(linear,right top,left top,from(rgba(21,98,240,.45)),to(rgba(14,31,58,.45)));
			    background: linear-gradient(270deg,rgba(21,98,240,.45),rgba(14,31,58,.45));
			    height: 41px;
			    width: 17px;
				
				left: 50%;
				top: 8px;
				-webkit-transform: rotate(90deg) translate(-222%,22%);
				transform: rotate(90deg) translate(-222%,22%);
			}
			
			.split-directive-bar{
				left: 0;
				width: 100%;
				cursor: ns-resize;
				height: 0.5rem;
				background: #2b2c2f;
				border-top: 1px solid rgb(24, 24, 27);
				border-bottom: 1px solid rgb(24, 24, 27);
				
				background-image: url("/src/assets/icons/shenglvehao.svg");
				background-position-y: center;
				background-repeat: no-repeat;
				background-position-x: center;
				background-size: 25px;
				
/* 				>.split-directive-bar-i{
					margin-top: -6px;
					text-align: center;
				} */
			}
			
			>.panel{
				display: -webkit-flex;
				display: flex;
				-webkit-flex-direction: row;
				flex-direction: row;
				height: 100%;
				
				>.pane-tabs{
					width: 35px;
					display: -webkit-flex;
					display: flex;
					-webkit-flex-direction: column;
					flex-direction: column;
				
					padding-left: 6px;
					padding-top: 40px;
					padding-bottom: 20px;
					
					.tab1{
						flex: 0.5;
						margin-bottom: 8px;
						background: transparent;
						>button{
							width: 100%;
							height: 100%;
							cursor: pointer;
							border-radius: 12px 0px 0px 12px;
							border: 1px solid #0080ff;
							border-right: 0rem;
							background: transparent;
							color:#ccc;
							>:hover{
								background:#0080ff;
							}
						}
					}
					.tab2{
						flex: 0.5;
						margin-bottom: 8px;
						background: transparent;
						>button{
							width: 100%;
							height: 100%;
							cursor: pointer;
							border-radius: 12px 0px 0px 12px;
							border: 1px solid #0080ff;
							border-right: 0rem;
							background: transparent;
							color:#ccc;
							>:hover{
								background:#0080ff;
							}
						}
					}
					
				}
				
				>.asset-pane{
					flex: 1;
					border-right: 1px solid #18181b;
					background-color: #313235;
					>.panel-header{
						height: 33px;
						background: #36373a;
						margin-bottom: 1px;
						border-top: 0rem;
						border-left: 0rem;
						border-right:  0rem;
						padding-top: 3px;
 						display: flex;
						-webkit-flex-direction: row;
						flex-direction: row;
						>ul{
							margin-top: 0.3125rem;
							flex: 0.5; 
							margin-left: 0.3125rem; 
							overflow: auto;
							>li{
								list-style: none;
								float: left;
								cursor: pointer;
								color: #ccc;
								font-size: 0.875rem;
								padding-left: 0.3125rem;
								>div{
									width: 1.25rem;
									width: 1.25rem;
								}
								>.arrow-i{
									width: 1.0625rem;
									font-size: 1rem;
								}
							}
						}
						>.tool-bar{
							flex: 0.5; 
		 					text-align: right;
 							display: flex;
							-webkit-flex-direction: row;
							flex-direction: row; 
							>.input-asset-search{
								flex: 1;
								margin-right: 0.625rem;
								height: 2.1875rem;
								margin-top: -1px;
								>input[type=text]{
									background: #1f2632;
									border: 1px solid #4d505e;
									border-radius: 0.9375rem;
									outline-style: none ;
									caret-color:#0080ff;
									height: 1.625rem;
									color: #ccc;
									width: 17.5rem;
									padding-left: 1.125rem;
									padding-right: 1.125rem;
									background-image: url('../../../../assets/icons/search.svg');
									
									background-size: 1.375rem;
									background-repeat: no-repeat;
									background-position-y: center;
									background-position-x: 15.625rem;
								}
								>input[type=text]:focus {
									border: px solid #0080ff;
								}
							}
							>.btn-asset-manage{
								width: 112px;
								margin-right: 3px;
								>button{
									width: 112px;
									height: 1.625rem;
									border: 1px solid #4d505e;
									background: transparent;
									color: #ccc;
									>div{
										width: 15px;
										position: absolute;
										margin-top: 2px;
										margin-left: 0.625rem;
									}
								}
							}
							>.btn-asset-refresh{
								width: 1.875rem;
								padding: 0.125rem;
								margin-right: 0.4375rem;
								margin-top: 1px;
								>button{
									background: transparent;
									color: #ccc;
									font-size: 1.25rem;
								}
							}
							
						}
						
						>span{
							font-size: 0.875rem;
							padding-left: 0.625rem;
							color: #ccc;
						}
					}
					>.panel-body{
						height: 100%;
						overflow: hidden;
						/* padding-bottom: 52px; */
						border-top: 1px solid #424653;
						display: flex;
						-webkit-flex-direction: row;
						flex-direction: row; 
						>.classify-nav{
							width: 15rem;
							border-right: 1px solid #18181b;
							height: 100%;
							
							.el-tree{
								border-bottom: 1px solid #515664;
								-webkit-box-flex: 1;
								-ms-flex: 1;
								flex: 1;
								background-color: #2d2d31;
								color: #ccc;
							}
							.el-tree-node{
								border-left: 2px solid transparent;
								background-color: #28292d;
								border-bottom: 1px solid #515664;
								padding-left: 12px;
							}
							
						}
						>.asset-list{
							flex: 1;
							width: 100%;
							padding-bottom: 3.25rem;
							overflow: auto;
							>ul{
								display: flow-root;
								position: relative;
								>li{
									list-style: none;
									float: left;
									cursor: pointer;
									color: #ccc;
									>div{
										height: 80px;
										width: 80px;
										border: 1px solid  #515664;
										margin: 10px 0px 0px 10px;
										>img{
											width: 100%;
											color: aqua;
										}
									}
								}
							}
						}
					}
				}
				>.draw-tool-pane{
					width: 320px;
					height: 100%;
					border-right: 1px solid #18181b;
					>.panel-header{
						height: 33px;
						background: #36373a;
						margin-bottom: 1px;
						border-top: 0rem;
						border-left: 0rem;
						border-right:  0rem;
						padding-top: 5px;
						>span{
							font-size: 0.875rem;
							padding-left: 0.625rem;
							color: #ccc;
						}
					}
					
				}
				>.draw-asset-pane{
					width: 18.75rem;
					height: 100%;
					border-right: 1px solid #18181b;
					>.panel-header{
						height: 33px;
						background: #36373a;
						margin-bottom: 1px;
						border-top: 0rem;
						border-left: 0rem;
						border-right:  0rem;
						padding-top: 5px;
						>span{
							font-size: 0.875rem;
							padding-left: 0.625rem;
							color: #ccc;
						}
					}
				}
			}
		
	}
	
	::-webkit-scrollbar {
		width: 0rem; /*对垂直流动条有效*/
		height: 0rem; /*对水平流动条有效*/
	}

	/*定义滚动条的轨道颜色、内阴影及圆角*/
	::-webkit-scrollbar-track{
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
		background-color: rosybrown;
		border-radius: 0px;
	}


   /*定义滑块颜色、内阴影及圆角*/
	::-webkit-scrollbar-thumb{
		border-radius: 0px;
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
		background-color: #E8E8E8;
	}

	/*定义两端按钮的样式*/
	::-webkit-scrollbar-button {
		display: none;
	}

	/*定义右下角汇合处的样式*/
   ::-webkit-scrollbar-corner {
		display: none;
	}
</style>